<template>
  <view class="tabs">
    <view
      class="tab"
      :class="{ active: index === current }"
      v-for="(item, index) in list"
      :key="item.name"
      @click="$emit('change', index)"
    >
      {{ item.name }}
    </view>
    <view
      class="underlineWrapper"
      :class="{
        middle: current === 1,
        right: current === 2,
      }"
    >
    </view>
  </view>
</template>

<script>
  export default {
    props: {
      list: {
        type: Array,
        required: true
      },
      current: {
        type: Number,
        required: true
      }
    }
  };
</script>

<style lang="scss" scoped>
  .tabs {
    display: flex;
    justify-content: space-around;
    position: relative;
    .tab {
      width: 250rpx;
      padding: 22rpx 0;
      text-align: center;
      font-size: 30rpx;
      color: #676767;
    }
    .underlineWrapper {
      background: $theme-color;
      width: 154rpx;
      height: 4rpx;
      position: absolute;
      bottom: 0;
      transition: all .2s;

      left: 48rpx;
      &.middle {
        left: 298rpx;
      }
      &.right {
        left: 548rpx;
      }
    }
  }
</style>